<template>
	<view class="logins">
		<nav-bar isBack  title="我的关注" ></nav-bar>
		<view class="s_cTabs">
			<view class="s_ctItem" v-for="(item,index) in carTypes" :class="{active:current==index}" :data-current="index" @tap="tabChange">{{item.name}}<text></text></view>
		</view>	
		<view class="s_cCan">
			<swiper class="s_cSwiper" @change="swiperChange" :current="current">
				<!-- 设计师 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="nextPage">
					  <view class="i-dcont" v-for="(item,index) in deginlist" :key="index">
						   <view class="i-img" @click="navto('/pages_design/pages/design/personal/personal?designerId=' + item.id)"><image :src="item.avatar.path"></image></view>
						   <view class="i-tit" @click="navto('/pages_design/pages/design/personal/personal?designerId=' + item.id)">
							   <text class="text1">{{item.name}}</text>
							   <text class="text2">从业{{item.employ_year || '1'}}年 | 方案{{item.case_num}}</text>
						   </view>
						   <view class="i-mk" @click="focusdegin(item.id)">已关注</view>
					  </view>
					  <view class="nolist" v-if="deginlist==''">
						  <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
				<!-- 店铺 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="shopPage">
					  <view class="i-dcont" v-for="(item,index) in shoplist" :key="index">
						   <view class="i-img" @click="navto('/pages_mall/pages/mall/store/store?storeId=' + item.store_id)"><image :src="item.store_logo"></image></view>
						   <view class="i-tit" @click="navto('/pages_mall/pages/mall/store/store?storeId=' + item.store_id)">
							   <text class="text1">{{item.store_name}}</text>
							   <text class="text2">粉丝{{item.fans_num}}</text>
						   </view>
						   <view class="i-mk" @click="focusStore(item.store_id)">已关注</view>
					  </view>
					  <view class="nolist" v-if="shoplist==''">
						  <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
				<!-- 施工 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="buildpage">
					  <view class="i-dcont" v-for="(item,index) in buildlist" :key="index">
						   <view class="i-img"><image :src="item.avatar.path"></image></view>
						   <view class="i-tit">
							   <text class="text1">{{item.title}}</text>
							   <text class="text2">粉丝{{item.fans_num}}</text>
						   </view>
						   <view class="i-mk">已关注</view>
					  </view>
					  <view class="nolist" v-if="buildlist==''">
						  <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
				<!-- 小区 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="plotPage">
					  <view class="estateItem" v-for="(item,index) in plotlist" :key="index" >
						  <view class="itemImg" v-if="Array.isArray(item.thumb_url)" @click="navto('/pages/onePlusN/estateIndex?estate_id=' + item.id)">
						  		<image :src="item.thumb_url[0].path?item.thumb_url[0].path:`${baseImg}/static/login/logo.png`" mode=""></image>
						  	</view>
						  	<view class="itemImg" v-else @click="navto('/pages/onePlusN/estateIndex?estate_id=' + item.id)">
						  		<image :src="item.thumb_url.path?item.thumb_url.path:`${baseImg}/static/login/logo.png`" mode=""></image>
						  	</view>
						  	<view class="itemInfo">
								<view class="i-mk" @click="cancelFollow(item.id)">已关注</view>
						  		<view class="infoTitle" @click="navto('/pages/onePlusN/estateIndex?estate_id=' + item.id)">
						  			<h3>{{item.name}}</h3>
						  		</view>
						  		<view class="infoTime" @click="navto('/pages/onePlusN/estateIndex?estate_id=' + item.id)">
						  			<p>{{item.city}} | {{$utils.getFormatDate(item.build_time*1000,'yyyy')}}年建成</p>
						  			<p>{{item.sale_num}}套在售</p>
						  		</view>
						  		<span>¥{{item.area_price}}/m²</span>
						  	</view>
					  </view>
					  <view class="nolist" v-if="plotlist==''">
						  <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
				<!-- 话题 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="themePage">
					  <view class="i-dcont" v-for="(item,index) in themelist" :key="index">
						   <view class="i-img"><image :src="item.logo.path"></image></view>
						   <view class="i-tit">
							   <text class="text1">{{item.name}}</text>
							   <text class="text2">{{item.desc}}</text>
						   </view>
						   <view class="i-mk">已关注</view>
					  </view>
					  <view class="nolist" v-if="themelist==''">
						  <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
			</swiper>	
		</view>			
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_my from '@/service/my.js'
import service_mall from '@/service/mall.js'
import service_oneN from '@/service/oneN.js'
import service_design from '@/service/design'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
			baseImg: 'http://manager.ryz1620.com',
			carTypes:[
				{
				  name:'设计师'
				},
				{
				  name:'店铺'
				},
				{
				  name:'施工队'
				},
				{
				  name:'小区'
				},
				{
				  name:'话题'
				},
			],
			current:0,
			deginlist:[],
			deginpage:1,
			shoplist:[],
			shoppage:1,
			buildlist:[],
			buildpage:1,
			plotlist:[],
			plotpage:1,
			themelist:[],
			themepage:1,
		}
	},
	onLoad() {
		this.$utils.getUrl()
		this.getList()
		this.getshoppageList()
		this.getbuildpageList()
		this.getplotpageList()
		this.getthemepageList()
	},
	methods: {
		navto(url){
			uni.navigateTo({
				url
			})
		},
		// 关注or取消关注店铺
		focusStore(id) {
			uni.showModal({
				title: '提示',
				content: '确认取消关注?',
				success:  (res) => {
					if (res.confirm) {
					service_mall.store_follow({ store_id: id, type:2 })
						.then(res => {
							if (res.code == 1) {
								this.shoplist=[],
								this.shoppage=1,
								this.getshoppageList()
							}
							else {
								this.$utils.showErr({ title: res.msg })
							}
						})		
					} else if (res.cancel) {
						return
					}
				}
			});
					
		},
		focusdegin(id){
			uni.showModal({
			    title: '提示',
			    content: '确认取消关注?',
			    success:  (res) => {
			        if (res.confirm) {
					service_design.focusDesigner({ designerId: id, status:0 })
						.then(res => {
							this.deginlist=[]
							this.deginpage=1
							this.getList()
						})	
			        } else if (res.cancel) {
						return
			        }
			    }
			});
		},
		cancelFollow(id){
			uni.showModal({
				title: '提示',
				content: '确认取消关注?',
				success:  (res) => {
					if (res.confirm) {
					service_oneN.toFollow({estate_id:id,status:0})
						.then(res => {
							if (res.code == 1) {
								this.plotlist=[],
								this.plotpage=1,
								this.getplotpageList()
							}
							else {
								this.$utils.showErr({ title: res.msg })
							}
						})		
					} else if (res.cancel) {
						return
					}
				}
			});
			
		},
		tabChange(e){
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current = index;
		},
		swiperChange(e) {
				var index = e.target.current || e.detail.current;
				this.current = index;		
		},
		nextPage(){
			this.deginpage++
			this.getList()
		},
        getList(){
        	uni.showLoading()
        	service_my.getdegin({
        		 page:this.deginpage
        	})
        		.then(res => {
        			uni.hideLoading()
					let data = res.data
					for(let i = 0;i<data.length;i++){
						this.deginlist.push(data[i])
					}
        		})
        		.catch(err => {
        			uni.hideLoading()
        		})
        },
		shopPage(){
			this.shoppage++
			this.getshoppageList()
		},
		getshoppageList(){
			uni.showLoading()
			service_my.getshop({
				 page:this.shoppage
			})
				.then(res => {
					uni.hideLoading()
					let data = res.data.data
					for(let i = 0;i<data.length;i++){
						this.shoplist.push(data[i])
					}
				})
				.catch(err => {
					uni.hideLoading()
				})
		},
		buildPage(){
			this.buildpage++
			this.getbuildpageList()
		},
		getbuildpageList(){
			uni.showLoading()
			service_my.getbuild({
				 page:this.buildpage
			})
				.then(res => {
					uni.hideLoading()
					let data = res.data
					for(let i = 0;i<data.length;i++){
						this.buildlist.push(data[i])
					}
				})
				.catch(err => {
					uni.hideLoading()
				})
		},
		plotPage(){
			this.plotpage++
			this.getplotpageList()
		},
		getplotpageList(){
			uni.showLoading()
			service_my.getplot({
				 page:this.plotpage
			})
				.then(res => {
					uni.hideLoading()
					let data = res.data
					for(let i = 0;i<data.length;i++){
						this.plotlist.push(data[i])
					}
				})
				.catch(err => {
					uni.hideLoading()
				})
		},
		themePage(){
			this.themepage++
			this.getthemepageList()
		},
		getthemepageList(){
			uni.showLoading()
			service_my.gettheme({
				 page:this.themepage
			})
				.then(res => {
					uni.hideLoading()
					let data = res.data
					for(let i = 0;i<data.length;i++){
						this.themelist.push(data[i])
					}
				})
				.catch(err => {
					uni.hideLoading()
				})
		},
	}
}
</script>

<style lang="scss" scoped>
.logins{
	width: 100vw;height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.s_cTabs {height: 100rpx;position: relative;display: flex;z-index: 500;background: #fff;
	.s_ctItem {font-size: 30rpx;color: #939393;  display: flex;justify-content: center;align-items: center;flex: 1;
		&.active {font-weight: bold;position: relative;color: #303030;
		 text{
			width: 40rpx;height: 6rpx;border-radius: 4rpx 4rpx;background: #FFD425;position: absolute;bottom: 0;    left: 50%;margin-left: -20rpx;z-index: 1;; 
		 }
		}
	}
	.s_ctCursor {width: 40rpx;height: 8rpx;border-radius: 4rpx 4rpx;background: #ffd425;position: absolute;bottom: 0;left: 0;z-index: 1;transform: translateX(166rpx);}
}
.s_cCan{
	height: 100%;
}
.estateItem {
					padding: 40rpx 30rpx;
					position: relative;
					width: 100%;
					height: 270rpx;
					display: flex;
					border-bottom: 2rpx solid #F4F4F4;

					.itemImg {
						overflow: hidden;
						width: 224rpx;
						height: 188rpx;
						margin-right: 24rpx;
						border-radius: 4rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 4rpx;
						}
					}

					.itemInfo {
						
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.infoTitle {
							width: 434rpx;
							font: 600 28rpx/48rpx PingFang SC;
							color: #333333;
							display: flex;
							align-items: center;
							justify-content: space-between;

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.infoTime {
							font: 400 24rpx/40rpx PingFang SC;
							color: #333333;
						}

						span {
							font: 400 24rpx/48rpx PingFang SC;
							color: #FF615D;
						}
					}
				}
.i-dcont{
	padding: 30rpx;
	min-height: 176rpx;
	padding-left: 150rpx;
	position: relative;
	.i-img{
		width: 104rpx;
		height: 104rpx;
		position: absolute;
		left: 30rpx;
		top:30rpx;
		border-radius: 50%;
		background: #f9f9f9;
		overflow: hidden;
	}
	.i-tit{
		line-height: 52rpx;
		padding-right: 140rpx;
		text{
			display: block;
		}
		.text1{
			font-size: 32rpx;
			color: #333333;
		}
		.text2{
			font-size: 24rpx;
			color: #939393;
		}
	}
	.i-mk{
		position: absolute;
		right: 30rpx;
		top:54rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 25rpx;
		border-radius: 30rpx;
		border: 1px #ccc solid;
		color: #939393;
	}
}
.itemInfo .i-mk{
		position: absolute;
		right: 30rpx;
		top:40rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 25rpx;
		border-radius: 30rpx;
		border: 1px #ccc solid;
		color: #939393;
	}
.nolist{
	margin-top: 200rpx;
	line-height: 80rpx;
	text-align: center;
	color: #939393;
}
.nolist image{
	display: block;
	width: 288rpx;
	height: 232rpx;
	margin: auto;
}
.s_dList{
	height: 100%;
}
</style>